<!--
 * @Author: qiaoxin
 * @Date: 2024-04-09 19:35:26
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-05-05 11:16:02
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\requirement\detail.vue
-->

<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '需求单',
    enablePullDownRefresh: true,
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view style="min-height: 100vh; background-color: #f2f2f1">
    <view style="position: sticky; top: 0; z-index: 9999">
      <wd-navbar title="需求单" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
    </view>
    <view>
      <th-card title="基础信息">
        <th-form>
          <th-form-item label="单据编号">
            <text class="text">{{ form.demandCode }}</text>
          </th-form-item>
          <th-form-item label="日期">
            <text class="text">{{ formatByDayjs(form.demandDate) }}</text>
          </th-form-item>
          <th-form-item label="客户">
            <text class="text">{{ form.cusCode }}</text>
          </th-form-item>
          <th-form-item :label="form.cusFlag == '0' ? '业务员' : '需求人'">
            <text class="text">{{ form.personName }}</text>
          </th-form-item>
          <th-form-item label="业务部门">
            <text class="text">{{ form.deptName }}</text>
          </th-form-item>
        </th-form>
      </th-card>
      <th-card title="产品需求信息">
        <th-form>
          <th-form-item label="需求类型">
            <text class="text">{{ form.demandType }}</text>
          </th-form-item>
          <th-form-item label="需求产品">
            <text class="text">{{ form.invName }}</text>
          </th-form-item>

          <th-form-item label="需求产品规格">
            <text class="text">{{ form.invStd }}</text>
          </th-form-item>
          <th-form-item label="应用领域">
            <text class="text">{{ form.applicationType }}</text>
          </th-form-item>
          <th-form-item label="年需求量/吨">
            <text class="text">{{ form.invDemand }}</text>
          </th-form-item>
          <th-form-item label="是否有外来样">
            <text class="text">{{ form.sampleFlagName }}</text>
          </th-form-item>
          <th-form-item label="样品编码" v-if="form.sampleFlag != '0'">
            <text class="text">{{ form.sampleCode }}</text>
          </th-form-item>
          <th-form-item label="需求样品数量" v-if="form.sampleFlag != '0'">
            <text class="text">{{ form.samplesNum }}{{ form.sampleUnit }}</text>
          </th-form-item>
          <th-form-item label="来样批次" v-if="form.sampleFlag != '0'">
            <text class="text">{{ form.sampleBatch }}</text>
          </th-form-item>
          <th-form-item label="要求完成时间">
            <text class="text">{{ formatByDayjs(form.askCompleteTime) }}</text>
          </th-form-item>
          <th-form-item label="需求描述">
            <text class="text">{{ form.demandDesc }}</text>
          </th-form-item>
        </th-form>
      </th-card>

      <th-card title="审核信息" v-if="isDetail != '1'">
        <view class="row-list">
          <view class="row" v-if="form.status == '1'">
            <!-- <view class="label">审核意见</view> -->
            <view class="value">
              <view class="mb2 mt2">
                <h5>审核意见</h5>
              </view>
              <wd-textarea
                type="textarea"
                v-model="comment"
                rows="6"
                placeholder="请输入审核意见"
              ></wd-textarea>
            </view>
          </view>
          <view v-if="form.instanceId">
            <view class="mb2 mt2">
              <h5>流转详情</h5>
            </view>
            <flowDetailsTable
              ref="flowDetailsTableRef"
              :processInstanceId="form.instanceId"
            ></flowDetailsTable>
          </view>
        </view>
        <view class="flow-btn-fixed" v-if="form.status == '1'">
          <view class="btn_group" style="width: 100%">
            <view class="btn danger" @click="oncomplete(1)">拒绝</view>
            <view class="btn primary" @click="oncomplete(0)">同意</view>
          </view>
        </view>
      </th-card>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getObj, completeTask, selectTaskByProcessInstanceId } from '@/service/pm-requirement';
import { formatByDayjs } from '@/utils/util';
// import { uni } from '@dcloudio/uni-h5';
import flowDetailsTable from '@/task/components/flowDetailsTable.vue';
import { nextTick } from 'process';

const setting = useSetting();
const comment = ref('');
const flowDetailsTableRef: any = ref({});
const isDetail = ref('0');

// 提交表单数据
const form = reactive({
  id: '',
  demandDate: '',
  personName: '',
  demandType: null,
  deptHead: '',
  deptCode: '',
  applicationType: '',
  samplesNum: '',
  demandDesc: '',
  sampleCoding: '',
  askCompleteTime: null,
  taskCode: '',
  userCode: '',
  invName: '',
  invDemand: '',
  sampleFlag: null,
  demandCode: '',
  cusName: '',
  personCode: '',
  deptHeadCode: '',
  cusFlag: '0',
  demandResult: '',
  completeTime: '',
  // technologyHead: '',
  remark: '',
  // technologyHeadCode: '',
  taskId: null,
  instanceId: '',
  invStd: '',
  sampleCode: '',
  sampleBatch: '',
  deptName: '',
  rdFlag: null,
  chiefEngineer: '',
  deputyChiefEngineer: '',
  status: '',
  sampleFlagName: '',
  deputyChiefEngineerUrl: '',
  chiefEngineerUrl: '',
  sampleUnit: '',
  cusCode: '',
});

const init = (id) => {
  uni.showLoading({
    mask: true,
  });
  getObj({ id })
    .then((res) => {
      console.log('res', res);
      Object.assign(form, res.data);
      if (res.data.instanceId) {
        selectTaskByProcessInstanceId({
          processInstanceId: res.data.instanceId,
        }).then((res) => {
          form.taskId = res.data && res.data.taskId ? res.data.taskId : '';
        });
      } else {
        form.taskId = '';
      }
      nextTick(() => {
        if (form.status != '1') {
          flowDetailsTableRef.value.getFlowDetails();
        }
      });
    })
    .finally(() => {
      uni.hideLoading();
      uni.stopPullDownRefresh();
    });
};

onLoad((options) => {
  console.log('opp', options);
  const id = options.id;
  isDetail.value = options.isDetail;
  init(id);
});

onPullDownRefresh(() => {
  init(form.id);
});

const goBack = () => {
  uni.navigateBack();
};

const oncomplete = (type) => {
  if (type == '1' && !comment.value) {
    uni.showToast({
      title: '请填写审核意见',
      icon: 'none',
      mask: true,
    });
    return;
  }

  const params = {
    // ...form,
    taskId: form.taskId,
    comment: comment.value,
    id: form.id,
    approve: type == 0 ? true : false,
  };
  uni.showLoading({
    mask: true,
  });
  completeTask(params, form.id)
    .then((res) => {
      uni.showToast({
        title: '单据审核成功',
        icon: 'none',
        mask: true,
      });
      uni.navigateBack({});
    })
    .finally(() => {
      uni.hideLoading();
    });
};
</script>

<style lang="scss" scoped>
.card-detail {
  padding: 0 !important;
}

.wd-cell {
  padding-left: 0 !important;
}

.wd-card__title {
  border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .pm-title {
    box-sizing: border-box;
    padding-left: 20rpx;
    margin: 40rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-left: 8rpx solid #2e5cf6;
    border-radius: 4rpx;
  }

  .pm-row {
    display: flex;
    min-height: 60rpx;
    border-bottom: 1px solid #f6f0f0;

    .pm-label {
      display: flex;
      align-items: center;
      width: 20%;
      font-size: 26rpx;
      color: #979494;
    }

    .pm-value {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 26rpx;
      color: #333;
    }
  }
}

.sign-main {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // width: 100%;
  // margin: 20rpx 0;
  position: fixed;
  right: 0rpx;
  bottom: 40rpx;
  width: 160rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: white;
  text-align: center;
  background-color: rgb(77 128 240);

  // border-radius: 50%;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}

:deep(.label) {
  width: 160rpx !important;
}

.result-tag {
  padding: 6rpx 14rpx;
  font-size: 24rpx;
  color: white;
  background-color: #87d068;
  border-radius: 4rpx;
}

.sign-main-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .sign-main-show-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #818181;
    border-bottom: 1px solid #e3e3e3;
  }

  .sign-main-show-line {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border: 4rpx solid #d0dbff;
    border-radius: 10rpx;
  }

  .sign-main-show-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    border-top: 1px solid #e3e3e3;
  }
}

.flow-btn-fixed {
  width: 100%;

  // position: fixed;
  // bottom:0;
  // right:0

  background-color: white;
}

.btn_group {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49%;
    height: 40px;
    color: white;
    border-radius: 6rpx;
  }

  .danger {
    background-color: #f56c6c;
  }

  .primary {
    background-color: #409eff;
  }
}

.wd-textarea {
  padding: 0;
}

.form-item {
  flex: auto !important;
}
</style>
